<template>
  <header>
    <div class="top bg-fff">
      <div class="w1200 h100 flex jc-sb aic">
        <div class="logo-box flex aic">
          <img
            src="../assets/img/logo.webp"
            alt=""
            style="width: 60px; height: 60px"
          />
          <span class="f30 bold ml-15">智控教育集团</span>
        </div>
        <div class="serv flex">
          <img src="../assets/img/phone.webp" alt="" />
          <p class="flex fdc f24 jc-sb ml-10">
            <span class="f20">服务热线 ——</span>
            <span class="bold">133-9241-1270</span>
          </p>
        </div>
      </div>
    </div>

    <div class="nav-box">
      <nav class="flex jc-sa aic w1200">
        <router-link
          to="/home"
          active-class="active"
          class="cursor item flex aic jc-c"
          >首页</router-link
        >
        <router-link
          to="/about"
          active-class="active"
          class="cursor item flex aic jc-c"
          >关于智控</router-link
        >
        <router-link
          to="/shixun"
          active-class="active"
          class="shixun cursor item flex aic jc-c rel"
        >
          项目实训
        </router-link>
        <router-link
          to="/renli"
          active-class="active"
          class="cursor item flex aic jc-c"
          >人力资源</router-link
        >
        <router-link
          to="/jishu"
          active-class="active"
          class="cursor item flex aic jc-c"
          >技术研发</router-link
        >
        <router-link
          to="/chanpin"
          active-class="active"
          class="cursor item flex aic jc-c"
          >产品项目</router-link
        >
        <router-link
          to="/qiye"
          active-class="active"
          class="cursor item flex aic jc-c"
          >企业直聘</router-link
        >
      </nav>
    </div>
  </header>
</template>

<style lang="less">
header {
  .top {
    height: 110px;
    .phone {
      width: 36px;
      height: 37px;
    }
    .serv {
      color: rgb(4, 72, 153);
    }
  }
  .shixun {
    .list {
      display: none;
      left: 0;
      top: 45px;
      width: 100%;
      z-index: 100;
      flex-direction: column;
      align-items: center;
      .sanjiao-box {
        width: 100%;
      }
      .subitem {
        width: 100%;
        background-color: #0194d9;
        // border: 1px solid #0194d9;
        box-shadow: 3px 3px 8px 1px #999;
        text-align: center;
        height: 50px;
        color: #fff;
      }
      .subitem:hover {
        background-color: #fff;
        color: #0194d9;
        .sanjiao {
          border-bottom-color: #fff;
        }
      }
    }
    &:hover #list {
      display: flex;
    }
    .sanjiao {
      width: 0;
      height: 0;
      width: 0;
      height: 0;
      border: 10px solid #0194d9;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top-color: transparent;
    }
  }
  .nav-box {
    background-color: #323232;
  }
  nav {
    height: 50px;
    user-select: none;
    .item {
      color: #fff;
      height: 100%;
      padding: 0 30px;
      &:hover {
        background-color: #0094d9;
      }
      &.active {
        background-color: #0094d9;
      }
    }
  }
}
</style>
